<template>

	<div class="torderbox box">

		<yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
			<div class="short-item" v-for="item,key in data" :key="key" slot="list">
				<div class="si-Invalid" v-if="item.status==0">{{item.handleTime}}前房东未处理订单将自动失效</div>
				<div class="si-Invalid" v-if="item.status==1||item.status==2">{{item.payTime}}前未支付订单将自动失效</div>
				<div class="si-Invalid" v-if="item.status==3">{{item.jshouseStartTime[0]}}年{{item.jshouseStartTime[1]}}月{{item.jshouseStartTime[2]}}日入住</div>
				<div class="si-Invalid" v-if="item.status==4">{{item.jshouseEndTime[0]}}年{{item.jshouseEndTime[1]}}月{{item.jshouseEndTime[2]}}日退房</div>
				<div class="si-Invalid" v-if="item.status==5">您已完成入住，赶快去评价吧</div>
				<div class="si-Invalid" v-if="item.status==6">感谢您的入住及宝贵评价，期待您下次光临</div>
				<div class="si-Invalid" v-if="item.status==400">房东超时未处理您的申请，订单失效</div>
				<div class="si-Invalid" v-if="item.status==401">您取消了该订单，如有问题请联系房东或客服</div>
				<div class="si-Invalid" v-if="item.status==404">您取消了该订单，如有问题请联系房东或客服</div>
				<div class="si-Invalid" v-if="item.status==600">您于{{item.refundTime}}完成了退房</div>
				<div class="si-Invalid" v-if="item.status==800">订单异常，如有疑问请联系客服</div>
				<div class="order-title-nav">
					<span class="order-title">{{item.title}}</span>

					<span class="order-state" v-for="sitem,key in statusdata" :key="key" v-if="item.status==sitem.status">{{sitem.statustext}}</span>
				</div>
				<div class="order-main" @click="GOToderInfo(item.orderId,'1')">
					<div class="om-imgbox">
						<img class="om-img" v-if="item.houseImgUrl.indexOf('?')==-1" :src="item.houseImgUrl+'?imageslim'" />
						<img class="om-img" v-else :src="item.houseImgUrl" />
					</div>
					<div class="om-right">
						<p>入住时段：{{item.jshouseStartTime[1]}}月{{item.jshouseStartTime[2]}}日-{{item.jshouseEndTime[1]}}月{{item.jshouseEndTime[2]}}日</p>
						<p>入住时长：{{item.days}}晚</p>
						<p>订单总额：￥{{item.payPrices}}</p>
					</div>
				</div>
				<!--待确认-->
				<div class="order-bottom" v-if="item.status==0" @click="openConfrim(item.status,item.orderId)">
					<div class="ob-box">
						<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>取消订单
					</div>
				</div>

				<!--待支付-->
				<div class="order-bottom" v-if="item.status==1||item.status==2">
					<div class="ob-box" @click="openConfrim(item.status,item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>取消订单
					</div>
					<div class="ob-box" @click="GetAliPayInfoApi(item.orderId,item.orderNo,item.payPrices,item.title)">
						<div class="ob-boxicon"><img src="../assets/img/images/orderpayment_03.png" /></div>支付
					</div>
				</div>

				<!--待入住-->
				<div class="order-bottom" v-if="item.status==3">
					<div class="ob-box" @click="userRefund(item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>取消订单
						<!--//提前退房-->
					</div>
				</div>
				<!--入住中-->
				<div class="order-bottom" v-if="item.status==4">
					<div class="ob-box" @click="userRefund(item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/orderhuose_03.png" /></div>提前退房
					</div>
				</div>
				<!--待评价-->
				<div class="order-bottom" v-if="item.status==5">
					<div class="ob-box" @click="GOOrderComment(item.orderId,item.title,item.houseImgUrl,item.houseRent,item.roomRent,item.bedRental,item.houseId)">
						<div class="ob-boxicon"><img src="../assets/img/images/order_evaluate.png" /></div>评价
					</div>
				</div>
				<!--已完成、已退房、已取消、已失效-->
				<div class="order-bottom" v-if="item.status>5&&item.status!=404&&item.status!=800">
					<div class="ob-box" @click="openConfrim(item.status,item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/order_close.png" /></div>删除
					</div>
				</div>

				<!--已拒绝-->
				<div class="order-bottom" v-if="item.status==404">
					<div class="ob-box" @click="openConfrim(item.status,item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/order_close.png" /></div>删除
					</div>
					<div class="ob-box" @click="getreason(item.reason)">
						<div class="ob-boxicon"><img src="../assets/img/images/order_chak.png" /></div>查看原因
					</div>
				</div>
				<!--已冻结-->
				<div class="order-bottom" v-if="item.status==800">
					<div class="ob-box" @click="openConfrim(item.status,item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/order_close.png" /></div>删除
					</div>
					<div class="ob-box" @click="gotel">
						<div class="ob-boxicon"><img src="../assets/img/images/order_phone.png" /></div>联系客服
					</div>
				</div>
			</div>
			<!-- 数据全部加载完毕显示 -->
			<span slot="doneTip">暂无更多订单信息</span>
			<!-- 加载中提示，不指定，将显示默认加载中图标 -->
			<img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />

		</yd-infinitescroll>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import eventBus from "../assets/libs/eventBus.js";
	export default {
		name: "TorderView",
		data() {
			return {
				ordermsg: "",
				orderower: '你是否要取消订单申请，取消后如果所选日期被出租，将无法再次预定，确认是否取消',
				orderclose: "订单删除后将无法恢复，确认是否删除？",
				page: 1,
				order_type: '',
				statusdata: [{
					status: 0,
					statustext: "待确认"
				}, {
					status: 1,
					statustext: "待支付"
				}, {
					status: 2,
					statustext: "待支付"
				}, {
					status: 3,
					statustext: "待入住"
				}, {
					status: 4,
					statustext: "入住中"
				}, {
					status: 5,
					statustext: "待评价"
				}, {
					status: 6,
					statustext: "已完成"
				}, {
					status: 400,
					statustext: "已失效"
				}, {
					status: 401,
					statustext: "已取消"
				}, {
					status: 404,
					statustext: "已拒绝"
				}, {
					status: 600,
					statustext: "已退房"
				}, {
					status: 800,
					statustext: "已冻结"
				}, ],
				SessionUserinfo: JSON.parse(sessionStorage.getItem("userinfo"))
			}
		},
		props: ["data"],
		mounted() {
		},
		computed: {
			...mapGetters([
				'source',
			])
		},
		methods: {
			...mapActions({
				setOpenApp: 'setOpenApp',
				setUserInfo: 'setUserInfo',
				setUsersta: 'setUsersta',
				setAlipayInfo: 'setAlipayInfo',
				getCityIP: 'getCityIP'
			}),
			GetAliPayInfoApi(orderId,orderNo,payPrices,title) {
				this.$router.push({
					path: "/AliWapPay",
					query: {
						orderId: orderId,
						ordertype:1,
						orderNo:orderNo,
						payPrices:payPrices,
						title:title
					}
				})
				//				this.getCityIP();
				//				let ajaxSign = {
				//					source: this.source, // string 是 ios
				//					token: this.SessionUserinfo.token, // string 是 72386 c4045cc2f9b5a4d7e04e6e7a273
				//					orderId: orderId.toString(), // string 是 订单Id
				//				}
				//				let ajaxData = api.getAES(ajaxSign);
				//				api.GetAliPayInfo(ajaxData)
				//					.then(res => {
				//						let result = res.result.content;
				//						this.setAlipayInfo(res.result.content);
				//					})
			},
			userRefund(orderId) {
				this.$router.push({
					path: "/UserRefund",
					query: {
						orderId: orderId
					}
				})
			},
			GOOrderComment(orderId, title, houseImgUrl, houseRent, roomRent, bedRental, houseId) {

				this.$router.push({
					path: "/OrderComment",
					query: {
						orderId: orderId,
						houseId: houseId,
						title: title,
						houseImgUrl: houseImgUrl,
						houseRent: houseRent,
						roomRent: roomRent,
						bedRental: bedRental,
					}
				})
			},
			gotel() {
				this.$dialog.confirm({
					title: '联系客服',
					mes: "023-88256950",
					opts: () => {
						window.location = "tel:023-88256950"
					}
				});
			},
			getreason(reason) {
				this.$dialog.alert({
					mes: reason,
				});
			},
			openConfrim(sta, orderId) {
				let ajaxSign = {
					source: this.source, //string	是			
					token: this.SessionUserinfo.token, //string	是			
					userId: this.SessionUserinfo.id, //string	是			
					orderId: orderId, //string	是			
					type: '0', //string	是	1取消预约2取消支付3删除(见详细说明)
				}
				if(sta == 0) {

					ajaxSign.type = '1';
					this.ordermsg = this.orderower;
				}
				if(sta == 1 || sta == 2) {
					ajaxSign.type = '2';
					this.ordermsg = "取消订单后，如所选日期被出租，您将无法再次申请预订，确定是否取消？";
				}
				if(sta >= 5) {
					ajaxSign.type = '3';
					this.ordermsg = "订单删除后将无法恢复，确认是否删除？";
					//		this.ordermsg = this.orderclose;
				}
				this.$dialog.confirm({
					title: '提示',
					mes: this.ordermsg,
					opts: () => {
						let ajaxData = api.getAES(ajaxSign);
						api.GetOrderUser(ajaxData)
							.then(res => {
								this.$dialog.toast({
									mes: res.msg,
									timeout: 1000
								})
								if(res.sta == 200) {
									this.$parent.orderListshortdata = [];
									this.$emit('orderListshort', this.order_type, this.page);
								}
							})
					}
				});
			},
			loadList() {
				var that = this;
				eventBus.$on('order_type', (e) => {
					that.order_type = e
				})
				/* 单次请求数据完毕 */
				that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
				that.page++;
				that.$emit('orderListshort', that.order_type, that.page);
			},
			GOToderInfo(orderId,userType) {
				var that = this;
				that.$router.push({
					path: "/ToderInfo",
					query: {
						orderId: orderId,
						userType:userType
					}
				})
			}
		}
	}
</script>

<style>
	@import url("../assets/css/TorderView.css");
	@import url("../assets/css/orderalert.css");
	.shortorder .yd-list-loading>div {
		display: block !important;
	}
</style>